<template>
  <!-- 用户管理 -- 权限页面管理 -- 添加页面-->
  <div class="page-operate">
    <!-- 位置模块 -->
    <HeadTop></HeadTop>
    <div class="page-head">
      <span class="operate-text">添加页面配置</span>
      <div class="operate-box">
        <button class="submit" @click="add">添加</button>
        <button class="submit" @click="submit">提交</button>
        <button @click="back()">关闭</button>
      </div>
    </div>
    <div class="content-area">
      <div class="form-edit">
        <div class="page-form addRbacGroup">
          <el-form status-icon class="my-form my-form-600" v-for="(authorityMsg, key) in authorityMsgArr"
                   :key="authorityMsg.id" ref="authorityMsg"
                   :model="authorityMsg"
                   label-width="100px" size="medium">
            <el-form-item label="名称:">
              <el-input v-model="authorityMsg.name"></el-input>
            </el-form-item>
            <el-form-item label="权限编码:">
              <el-input v-model="authorityMsg.code"></el-input>
            </el-form-item>
            <el-form-item label="路径地址:">
              <el-input v-model="authorityMsg.page"></el-input>
            </el-form-item>
            <el-form-item label="页面请求:">
              <el-input v-model="authorityMsg.path"></el-input>
            </el-form-item>
            <el-form-item label="选择类型:">
              <el-select v-model="authorityMsg.type" placeholder="--请选择类型--">
                <el-option v-for="(item,key,index) in typeArr" :key="item.type" :label="item.text"
                           :value="item.type"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="描述:">
              <el-input type="textarea" v-model="authorityMsg.description"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import com from '../../../../js/common'

  import HeadTop from "../../../../components/head-top/head-top"
  import {rbacAdd} from '@/api/getData'

  export default {
    components: {
      HeadTop
    },
    data() {
      return {
        // 权限信息
        authorityMsgArr: [
          {
            name: '',
            path: '',
            description: '',
            type: '',
            code: '',
            page: '',
          },
        ],
        typeArr: [
          {
            text: '有路径',
            type: 1,
          },
          {
            text: '无路径',
            type: 0,
          },
        ],
      }
    },
    // 页面装载中
    created() {

    },
    methods: {
      // 提交页面信息
      submit() {
        const param = this.authorityMsgArr
        rbacAdd(param).then((res) => {
          com.mask()
          this.$message.success({
            message: '添加成功',
            duration: 1500,
            onClose: () => {
              com.unmask()
              this.$router.push('/manage/systemMgr/rbacMgr')
            }
          })
        }).catch((err) => {
          this.$message.error(err.data.message)
        })
      },
      // 添加一组
      add() {
        this.authorityMsgArr.push({
          name: '',
          path: '',
          description: '',
          type: '',
          code: '',
        })
      },
      // 返回上一级
      back() {
        this.$router.go(-1)
      },
    }
  }
</script>
<style lang="scss" type="text/scss">
  @import '../../../../style/entry/components/pageChildCommon';

  .addRbacGroup {
    flex-direction: column;
    align-items: center;
    form {
      margin-bottom: 40px;
    }
  }
</style>
